SwiftUI 教學：使用 List 控件顯示資料列表

SwiftUI 中的 List 控件是一個強大且靈活的工具，用於顯示資料列表。無論是靜態的數據，還是來自 API 的動態內容，List 都可以輕鬆地將它們呈現出來。本教學將介紹如何在 SwiftUI 中使用 List 來顯示簡單的資料列表。

1. 建立一個基本的 List

首先，我們來看看如何使用 List 來顯示一個靜態的資料列表。以下是一個簡單的範例，我們將展示一組靜態資料的名字列表。

import SwiftUI

struct ContentView: View {
    let names = ["Alice", "Bob", "Charlie", "David"]

    var body: some View {
        List(names, id: \.self) { name in
            Text(name)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在這個範例中，我們創建了一個包含幾個名字的 Array，然後使用 List 控件來顯示這些名字。List 會自動處理每個項目的顯示。

2. 自定義 List 中的項目

List 控件的強大之處在於您可以自定義每個項目的外觀。例如，您可以為每個名字顯示一個圖標，或者添加更多的內容：

import SwiftUI

struct ContentView: View {
    let names = ["Alice", "Bob", "Charlie", "David"]

    var body: some View {
        List(names, id: \.self) { name in
            HStack {
                Image(systemName: "person.fill")
                Text(name)
                    .font(.headline)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

這裡我們使用了 HStack 來將圖標和名字水平排列。Image(systemName:) 是 SwiftUI 提供的系統圖標，這些圖標可以輕鬆地集成到您的視圖中。

結語

List 是 SwiftUI 中顯示資料列表的核心控件，具有極高的靈活性和擴展性。無論您是在開發簡單的應用程序，還是需要處理複雜的數據結構，List 都能滿足需求。透過本教學，希望您對如何使用 List 有了更深入的了解，並且能夠將其應用到您的 SwiftUI 專案中。